<template>
  <div class="orderList-maintain">
    <el-row>
      <el-col :span="24">
        <h2 class="h2-style">订单列表</h2>
      </el-col>
      <div class="order-list-table">
        <el-form :inline="true" :model="form">
          <el-col :span="24" class="all-style">

            <el-col :span="6">
              <el-form-item label="订单编号" label-width="70px" align="left" style="width:100%">
                <el-input v-model="form.orderNo" placeholder="请输入订单编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="col-9-style">
              <el-form-item label="订购时间" label-width="70px" align="left" style="width:100%!important;">
                <el-date-picker v-model="form.timeArr" type="datetimerange" style="width:100%!important;"
                  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onTimeChange">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="订单状态" align="left" style="width:100%!important;" label-width="70px">
                <el-select v-model="form.orderStatus" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4" style="display:flex;flex-direction:row;justify-content:space-between">
              <el-col :span="24">
                <el-col :span="10">
                  <el-button type="primary" @click="onSearch">
                    查询
                  </el-button>
                </el-col>
                <el-col :span="10" :offset="2" style="display:flex;flex-direction:row;justify-content:flex-end;">
                  <el-button @click="onReset">
                    重置
                  </el-button>
                </el-col>

              </el-col>

            </el-col>
          </el-col>
        </el-form>
        <el-col :span="24" class="form-col24">
          <div class=" el-table__body-wrapper is-scrolling-none">

            <el-table ref="subTable" @current-change="handleSubChange" :data="tableData" border
              :header-cell-style="{background:'#f5f5f5'}" class="system-instyle">
              <!-- :highlight-current-row="true" -->
              <el-table-column label="序号" align="center" width="55">
                <template slot-scope="scope">
                  <span>{{scope.$index+(requestParam.page - 1) * requestParam.page_size + 1}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="order_no" label="订单编号" align="center" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="order_num" label="数量总计" align="center" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="订单状态" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span :style="{color:scope.row.order_status==1?'#FF4D4F':''}">{{scope.row.statusName}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="order_money" label="订单总额" align="center" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="create_date" label="订购时间" align="center" show-overflow-tooltip>
              </el-table-column>
              <!-- <el-table-column prop="order_detail"
                             label="合同详情"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column> -->
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="onLook(scope.row)">查看</el-button>
                  <!-- <el-button size="mini"
                           type="text"
                           @click="onTicket(scope.row.sid)">申请发票</el-button> -->
                  <!-- <el-button size="mini"
                           type="text"
                           :disabled='scope.row.ver==null ? true:false'
                           @click="onVersion(scope.row.sys_ver_id)">版本</el-button> -->
                  <!-- <el-button size="mini" type="text" :style="{display:scope.row.order_status==4?'block':'none'}"
                    @click="onDelete(scope.row)">删除</el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="24" class="form-modi-pagination" style="padding-bottom:20px;">
          <el-pagination id="pagination" @current-change="handleCurrentChangeSubList" :current-page="requestParam.page"
            :page-size="pagesize_sublist" :page-sizes="[10]" layout="total,  sizes,prev, pager, next, jumper"
            :total="total_sublist">
          </el-pagination>
        </el-col>
      </div>

      <!-- <el-col :span="24"
              class="form-modi-box">
        <el-button type="primary"
                   class="form-modi-add"
                   icon="el-icon-plus"
                   @click="onAdd">新增</el-button>
      </el-col> -->
    </el-row>
  </div>
</template>
<script>
  import { orderListApi } from "@/services/PersonalCenter";
  import { standardCodeApi } from '@/services/StandardCode'
  export default {
    data() {
      return {
        //uuid: this.$route.query.uuid,
        uuid: 1,
        value: '',
        form_add: {
          systemName: '',
          systemNo: '',
          systemDomain: '',
          systemPort: '',
          systemExplain: '',
          api_domain: '',
          api_port: '',
        },
        rules_add: {
          systemName: [
            { required: true, message: '系统名称不能为空', trigger: 'blur' }
          ],
          systemNo: [
            { required: true, message: '系统编号不能为空', trigger: 'blur' }
          ],
          api_domain: [
            { required: true, message: 'API域名不能为空', trigger: 'blur' }
          ],
          api_port: [
            { required: true, message: 'API端口不能为空', trigger: 'blur' },
            { pattern: /^[0-9]+$/, message: '只能输入整数' }
          ],
          systemDomain: [
            { required: true, message: '系统域名不能为空', trigger: 'blur' }
          ],
          systemPort: [
            { required: true, message: '系统端口不能为空', trigger: 'blur' },
            { pattern: /^[0-9]+$/, message: '只能输入整数' }
          ],
          systemExplain: [
            { required: true, message: '系统说明不能为空', trigger: 'blur' }
          ]
        },
        form: {
          orderNo: '',
          start_time: '',
          end_time: '',
          timeArr: [],
          orderStatus: ''
        },
        options: [{ value: '', name: '全部' }],
        tableData: [],
        page: '',
        pageTotal: 0,
        proNameData: '',
        total: 0,
        pagesize: 10,//每页的条数限制
        currentPage: 0,
        pagesize_sublist: 10,
        total_sublist: 0,
        currentPage_Journal: 1,
        total_Journal: 10,
        total_version: 0,
        currentPage_version: 1,
        //子系统列表传参 
        requestParam: {
          page: 1,
          page_size: 10,
        },
      }
    },
    methods: {
      //点击查询触发的事件
      onSearch() {
        this.requestParam.page = 1;
        this.getOrderList();
      },
      //点击重置触发的事件
      onReset() {
        this.form.orderNo = '';
        this.form.start_time = '';
        this.form.end_time = '';
        this.form.timeArr = [];
        this.form.orderStatus = '';
        this.onSearch();
      },
      //选择时间后触发的事件
      onTimeChange(val) {
        console.log('val=', val)
        if (val == null) {
          this.form.start_time = '';
          this.form.end_time = '';
        } else {
          this.form.start_time = val[0];
          this.form.end_time = val[1];

          var d = new Date(this.form.start_time);
          var dd = new Date(this.form.end_time);
          //开始
          var mmstart = d.getMonth() + 1;//开始时间的月
          var dstart = d.getDate();//开始时间的日
          var hstart = d.getHours();//开始时间的小时
          var mstart = d.getMinutes();//开始时间的分钟
          var sstart = d.getSeconds();//开始时间的秒

          //结束
          var mmend = dd.getMonth() + 1;//开始时间的月
          var dend = dd.getDate();//开始时间的日
          var hend = dd.getHours();//开始时间的小时
          var mend = dd.getMinutes();//开始时间的分钟
          var send = dd.getSeconds();//开始时间的秒
          //开始
          //判断月份是否超过10
          if (mmstart < 10) {
            mmstart = '0' + mmstart;
          }
          //判断天数是否超10
          if (dstart < 10) {
            dstart = '0' + dstart;
          }
          //判断时是否超10
          if (hstart < 10) {
            hstart = '0' + hstart;
          }
          //判断分是否超10
          if (mstart < 10) {
            mstart = '0' + mstart;
          }
          //判断秒是否超10
          if (sstart < 10) {
            sstart = '0' + sstart;
          }
          //结束
          //判断月份是否超过10
          if (mmend < 10) {
            mmend = '0' + mmend;
          }
          //判断天数是否超10
          if (dend < 10) {
            dend = '0' + dend;
          }
          //判断时是否超10
          if (hend < 10) {
            hend = '0' + hend;
          }
          //判断分是否超10
          if (mend < 10) {
            mend = '0' + mend;
          }
          //判断秒是否超10
          if (send < 10) {
            send = '0' + send;
          }
          this.form.start_time = d.getFullYear() + '-' + mmstart + '-' + dstart + ' ' + hstart + ':' + mstart + ':' + sstart;
          this.form.end_time = d.getFullYear() + '-' + mmend + '-' + dend + ' ' + hend + ':' + mend + ':' + send;


          // var date = '2015-03-05 17:59:00.0';
          // date = date.substring(0, 19);
          // date = date.replace(/-/g, '/');
          // var timestamp = new Date(date).getTime();
          var date = this.form.start_time;
          date = date.substring(0, 19);
          date = date.replace(/-/g, '/');
          this.form.start_time = new Date(date).getTime().toString().substring(0, 10);

          var date1 = this.form.end_time;
          date1 = date1.substring(0, 19);
          date1 = date1.replace(/-/g, '/');
          this.form.end_time = new Date(date1).getTime().toString().substring(0, 10);
          // this.form.start_time = this.form.start_time.replace(/-/g, '/');
          // this.form.start_time = new Date(this.form_start_time).getTime();

          console.log('csy44444444=', typeof (this.form.start_time), this.form.start_time)

        }
      },
      handleSubChange(val) {

      },
      //操作中的点击事件
      onLook(row) {
        if (row.order_status == 1) {
          this.$router.push({ path: '/orderDetail', query: { order_id: row.order_id, uuid: this.$route.query.uuid } });
        } else {
          this.$router.push({ path: '/orderOneDetail', query: { order_id: row.order_id, uuid: this.$route.query.uuid } });
        }

      },
      //数据列表分布
      handleCurrentChangeSubList(page) {
        this.requestParam.page = page;
        this.getOrderList();
      },
      //查看日志
      onTicket(id) {
        this.$message('申请发票')
      },
      //删除数据事件
      onDelete(row) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          orderListApi.onDelete({
            params: {
              uuid: this.uuid,
              order_id: row.order_id
            }
          }).then((res) => {
            if (res.code == 1) {
              this.$message.success('操作成功!')
              this.getOrderList();
            } else {
              this.$message.error(res.data.message);
            }
          }).catch((error) => {
            console.log(error)
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除!'
          });
        });
      },
      //获取订单列表数据
      getOrderList() {
        orderListApi.getOrderList({
          params: {
            order_no: this.form.orderNo,
            created_at_greater: this.form.start_time,
            created_at_less: this.form.end_time,
            order_status: this.form.orderStatus,
            // pagesize: this.requestParam.page_size,
            page: this.requestParam.page
          }
        }).then((res) => {
          // console.log(res)
          const that = this
          this.tableData = res.data.data;
          this.tableData.forEach((ele,index) => {
            ele.order_money = (ele.order_money / 100).toFixed(2)
            that.options.forEach(e => {
              if(e.value == ele.order_status){
                that.tableData[index].statusName=e.name
              }
            })
          })
          this.total_sublist = res.data.total;
        })
      },
      //获取下拉列表数据
      getStatu() {
        standardCodeApi.getStandardCodeData({
          data: {
            code_type: 'orderStatus'
          }
        }).then((res) => {
          this.options = this.options.concat(res.data.list);
          this.getOrderList();
        }).catch((error) => {
          console.log(error)
        })
      }
    },
    created() {
      //数据列表
      
      //获取下拉列表数据
      this.getStatu();
    }
  }
</script>
<style lang="scss" scoped>
  /deep/.el-date-editor .el-range-separator {
    padding: 0px !important;
    width: auto !important;
    line-height: 32px !important;
    color: #303133 !important;
  }

  /deep/ .all-style .el-form-item__content {
    line-height: 40px;
    font-size: 14px;
    width: 71% !important;
  }

  /deep/ .all-style .el-select {
    display: inline-block;
    position: relative;
    width: 92% !important;
  }

  .col-9-style {
    padding-left: 2.8%;
    display: flex;
    flex-direction: row;
    justify-content: center !important;
  }

  /deep/ .col-9-style .el-date-editor--datetimerange.el-input__inner {
    width: 100% !important;
  }

  .h2-style {
    height: 50px;
    line-height: 50px;
    //padding-left: 20px;
    margin-bottom: 20px;
    margin-top: 0;
    font-size: 16px;
    color: #1441b3;
    border-bottom: 1px solid #d9d9d9;
    padding-left: 20px;
  }

  .version-explain {
    width: 80%;
    height: 260px;
    overflow: auto;
    border: 1px solid #efefef !important;
  }

  /deep/ .el-form--inline .el-form-item {
    display: inline-block;
    margin-right: 10px;
    vertical-align: top;
    width: 162%;
  }

  /deep/ .current-row>td {
    background: #1890ff !important;
    color: white;
  }

  /deep/ .el-table__body tr.current-row>td .el-button {
    color: #fff;
  }

  .direction-style {
    text-align: right;
  }

  .system-inexplainstyle {
    width: 125.5% !important;
  }

  .order-list-table {
    padding: 0 20px;
  }

  // /deep/ #pagination .el-pager .active {
  //   background: #1abc9c;
  //   color: white;
  // }
  // /deep/ #pagination .el-pager .active:hover {
  //   color: #fff;
  // }
  // /deep/ #pagination .el-pager li:hover {
  //   color: #1abc9c;
  // }
  /deep/ .opeate_btn {
    padding: 8px 20px;
  }

  .system-style {
    text-align: left;
    width: 100% !important;
  }

  .system-instyle {
    width: 100% !important;
  }

  .sysno-style {
    text-align: right;
    width: 100% !important;
  }

  .sysno-instyle {
    width: 100% !important;
  }

  .area-style {
    text-align: left;
    width: 100% !important;
  }

  .area-instyle {
    width: 100% !important;
  }

  .port-style {
    text-align: right;
    width: 100% !important;
  }

  .port-instyle {
    width: 100% !important;
  }

  .modify-systemname {
    text-align: left;
    width: 100% !important;
  }

  .modify-insystemno {
    width: 100% !important;
  }

  .modify-box {
    width: 100% !important;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .detail-selecttime {
    display: block;
    float: left;
    width: 18%;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  .detail-inselecttime {
    display: block;
    float: right;
    width: 82%;
    height: 40px;
    line-height: 28px;
  }

  .detail-module {
    display: block;
    float: left;
    width: 18%;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }

  .modify-search {
    background: rgba(26, 188, 156, 1);
    margin: 0px;
    padding: 0px;
    width: 96px;
    height: 40px;
    line-height: 40px;
  }

  .modify-divbox {
    min-height: 300px;
    margin-top: 20px;
  }

  .table-width {
    width: 100% !important;
  }

  .table-pagination {
    padding: 20px 0;
    text-align: center;
  }

  .modify-jour {
    width: 100% !important;
  }

  .form-version {
    text-align: left;
    width: 100% !important;
  }

  .form-person {
    text-align: right;
    width: 100% !important;
  }

  .form-search {
    background: rgba(26, 188, 156, 1);
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: white;
  }

  .form-col24 {
    margin-top: -4px;
  }

  .form-modi-pagination {
    padding-top: 20px;
    text-align: center;
  }

  // .form-modi-box {
  //   text-align: right;
  //   margin-top: 15px;
  //   margin-bottom: 10px;
  // }
  .form-modi-add {
    margin: 0px;
    padding: 0px;
    width: 96px;
    height: 40px;
    line-height: 40px;
    background: rgba(26, 188, 156, 1);
  }

  .explain-style {
    width: 100% !important;
  }

  .save-style {
    width: 100% !important;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .save-left {
    background: rgba(26, 188, 156, 1);
    margin: 0px;
    padding: 0px;
    width: 96px;
    height: 40px;
    line-height: 40px;
    margin-right: 20px;
  }

  .save-right {
    background: rgba(26, 188, 156, 1);
    margin: 0px;
    padding: 0px;
    width: 96px;
    height: 40px;
    line-height: 40px;
  }

  // /deep/ #lookVersion .el-form-item__content {
  //   display: inline-block;
  //   vertical-align: top;
  //   width: 70% !important;
  // }
  // /deep/ #lookVersion .el-input__inner {
  //   height: 40px !important;
  // }
  /deep/ .toolbar {
    border: 1px solid #ccc;
  }

  /deep/ .text_one {
    border: 1px solid #cccccc;
    height: 300px;
  }

  //新增弹出框中的样式修改
  /deep/ #addSystemInfor .el-form-item__content {
    width: 70%;
  }

  /deep/ #addSystemInfor .el-input__inner {
    height: 40px !important;
  }

  //日志弹出框中的样式修改
  /deep/ #journalSystemInfor .datetime-style .el-date-editor .el-range__close-icon {
    line-height: 32px;
  }

  /deep/ #journalSystemInfor .select-style .el-input {
    width: 82% !important;
  }

  /deep/ #journalSystemInfor .el-form-item__content {
    line-height: 40px;
    position: relative;
    font-size: 14px;
    width: 93% !important;
    float: right;
  }

  #journalSystemInfor {
    #journalDetail {
      margin-bottom: -30px !important;
    }
  }

  //版本弹出框中的样式修改
  /deep/ #versionsysteminfor .el-input__inner {
    height: 40px !important;
  }

  /deep/ .system-name .el-input__inner {
    height: 40px !important;
    width: 93% !important;
  }

  /deep/ .system-name .el-form-item__content {
    width: 83.3% !important;
  }

  .orderList-maintain {
    background: white;
    overflow-x: hidden;
  }
</style>